<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="京东生鲜" @click-left="onClickLeft">
      <template #right>
        <van-icon @click="classify" name="wap-nav" size="24" color="#000" />
        <p></p>
        <van-icon
          style="margin-left: 10px"
          name="ellipsis"
          size="24"
          color="#000"
        />
      </template>
      <template #left>
        <van-icon name="arrow-left" size="22" color="#000" />
      </template>
    </van-nav-bar>
    <!-- 搜索框 -->
    <div
      style="
        width: 100vw;
        height: 15vw;
        display: flex;
        align-items: center;
        background: #01ab36;
        justify-content: space-around;
      "
    >
      <van-icon name="bars" size="22" color="#FFF" />
      <van-search
        style="width: 84.2vw"
        v-model="value"
        shape="round"
        background="#01ab36"
        placeholder="吃出美好生活"
      />
    </div>
    <!-- 轮播图 -->
    <div style="position: relative">
      <div
        style="
          width: 100vw;
          height: 24vw;
          background-image: linear-gradient(#01ab36, #efefef);
        "
      ></div>
      <div style="width: 100vw; height: 8vw; background-color: #f6f6f6"></div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(v, index) in imgs" :key="index">
          <img v-lazy="v" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div style="background-color: #f6f6f6; width: 100vw; text-align: center">
      <img
        src="//m11.360buyimg.com/babel/jfs/t1/165136/31/5175/21843/6017ed55E882e1fa9/06e0bbcbdc774c4f.jpg!q70.dpg.webp"
        alt=""
      />
    </div>
    <div style="background-color: #f6f6f6; width: 100vw; text-align: center">
      <!-- 列表 -->
      <div
        class="listimg"
        style="
          border-radius: 20px;
          width: 96.6vw;
          margin: auto;
          background-color: #fff;
        "
      >
        <van-grid :border="false" :column-num="5">
          <van-grid-item text="文字">
            <van-image
              src="https://m11.360buyimg.com/babel/jfs/t1/186493/5/29822/45696/635f4495E618a30d1/f72d07fe78070597.png.webp"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="//m11.360buyimg.com/babel/jfs/t1/181326/27/32272/50146/63dc5989F4f0b56a2/07338c26e8e1410c.png.webp"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="//m11.360buyimg.com/babel/jfs/t1/15325/35/20433/47329/63ac5cdbFc2c3ec37/19124833e509da15.png.webp"
            />
          </van-grid-item>
          <van-grid-item text="文字">
            <van-image
              src="//m11.360buyimg.com/babel/jfs/t1/183573/32/32956/45359/63e03ca7F141de714/1f8c6dc7bd6b85b2.png.webp"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="//m11.360buyimg.com/babel/jfs/t1/137909/32/28691/9155/62f0c592E49503e68/7a6486d98e83cf85.png.webp"
            />
          </van-grid-item>
        </van-grid>
        <div
          style="
            display: flex;
            justify-content: space-around;
            font-size: 12px;
            color: #999999; ;
          "
        >
          <span>时令水果</span>
          <span>品质肉禽</span>
          <span>海产活鲜</span>
          <span>面点烘焙</span>
          <span>乳品冷饮</span>
        </div>
        <van-grid :border="false" :column-num="5">
          <van-grid-item text="文字">
            <van-image
              src="//m11.360buyimg.com/babel/jfs/t1/6230/28/26442/39415/63dc59beFa66bd10d/e0beeb8f1f39b6e5.png.webp"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="//m11.360buyimg.com/babel/jfs/t1/55169/26/20375/14547/639a78efEfa634267/ba4610bebe073b07.png.webp"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="//m11.360buyimg.com/babel/jfs/t1/165650/2/27401/16647/6352bf3bEcb691fdb/35e76ae0c9cc2020.png.webp"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="//m11.360buyimg.com/babel/jfs/t1/185976/31/32639/46477/63e053e5F74e2e5ad/0762a3e1694ebd24.png.webp"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="//m11.360buyimg.com/babel/jfs/t1/33103/36/17409/10317/6376e1b7E15d2c5e8/a5cf19ea41b7c25b.png.webp"
            />
          </van-grid-item>
        </van-grid>
        <div
          style="
            display: flex;
            justify-content: space-around;
            font-size: 12px;
            color: #999999; ;
          "
        >
          <span>蔬菜蛋品</span>
          <span>车厘子</span>
          <span>预制菜</span>
          <span>时令尝新</span>
          <span>自有品牌</span>
        </div>
      </div>
      <img
        style="width: 100%; margin-top: 5px"
        src="https://m11.360buyimg.com/babel/jfs/t1/19378/39/19325/9300/630877d6Ec05df2a1/9708d3f07caabe06.png.webp"
        alt=""
      />
      <MyWaterfall></MyWaterfall>

      <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="search">分类</van-tabbar-item>
        <van-tabbar-item icon="friends-o">东家菜</van-tabbar-item>
        <van-tabbar-item icon="setting-o">品牌</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";
import MyWaterfall from "@/components/JH/homepage/MyWaterfall.vue";
Vue.use(Lazyload);
export default {
  components: {
    MyWaterfall,
  },
  data() {
    return {
      value: "",
      round: true,
      imgs: [
        "//m11.360buyimg.com/babel/jfs/t1/108173/19/37211/147147/63e098dcF0a0d6bf7/42f69ecffc727bc6.png.webp",
        "//m11.360buyimg.com/babel/jfs/t1/213087/40/25474/109850/63e22046F333b064e/8c23c394a2154554.png.webp",
        "//m11.360buyimg.com/babel/jfs/t1/60909/22/24128/214435/63e1f65fF7e99ff2d/c03d3bb39d056e3a.png.webp",
        "//m11.360buyimg.com/babel/jfs/t1/60909/22/24128/214435/63e1f65fF7e99ff2d/c03d3bb39d056e3a.png.webp",
        "//m11.360buyimg.com/babel/jfs/t1/74930/30/23409/148671/63e0ab35F9fa1c490/7e5db03a474763ca.png.webp",
        "//m11.360buyimg.com/babel/s1065x360_jfs/t1/98836/20/34769/120333/63dcbd00Fd2f79139/22971e0c4a55415c.png.webp",
        "//m11.360buyimg.com/babel/s1065x360_jfs/t1/61568/37/23725/269497/63e0d133Fc8876524/a3c1d8ba1fae31fa.png.webp",
        "//m11.360buyimg.com/babel/s1065x360_jfs/t1/107968/22/35532/116930/63dc9f17F02cf7181/47ccb54495527836.png.webp",
        "//m11.360buyimg.com/babel/jfs/t1/108173/19/37211/147147/63e098dcF0a0d6bf7/42f69ecffc727bc6.png.webp",
      ],
      active: 0,
    };
  },
  methods: {
    //跳转主页
    onClickLeft() {
      this.$router.push("/MyHome");
    },
    // 跳转分类页面
    classify() {
      this.$router.push("/ClassifyPage");
    },
  },
};
</script>

<style lang="scss" scoped>
.my-swipe {
  position: absolute;
  top: 0px;
  left: 10px;
  width: 94.6vw;
  height: 32vw;
  border-radius: 10px;
}
.my-swipe .van-swipe-item {
  width: 94.6vw;
  height: 32vw;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

img {
  width: 94.6vw;
  height: 240/7.5vw;
}
</style>